<template>	
	<div class="water-main">
		<div class="con-ratio">
			<p class="ratio">{{opt}}</p>
			<div class="yuan" :style="'height:' + opt">
				<i class="icon icon-yuan-shixin"></i>
			</div>
		</div>
	</div>
</template>
<script>
/**
 * @param {Array} opt 比率
 */
export default {
	name: 'dy-water',
	data () {	
		return {	

		}
	},
	props: {
		opt: String
	},
}
</script>
<style lang="less" scope>
.water-main {
 	width: 5rem;
 	position: relative;
 	height: 5rem;
 	border-radius: 50%;
 	margin: 0 auto;
 	border: .3rem solid #b5b8cf; 
	
	.con-ratio {

		.ratio {
			position: relative;
			line-height: 5rem;
			z-index: 1;
			color: #b5b8cf;
			font-size: .6rem;
			font-weight: bold;
		}

		.yuan {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			overflow: hidden;
		}


	 	i{
	 		position: absolute;
	 		bottom: 0;
	 		left: 0;
	 		line-height: 4.8rem;
		    text-align: center;
		    font-size: 4.8rem;
		    margin: 0 0 2% 2%;
		    color: #a2e1d4;
	 	} 	
 	}
}
</style>
